<template>
  <div class="screen">
    <div class="header">
      <div class="title">
        <div class="title-left"></div>
        <div class="title-value"><label>唐山路地下管廊综合监管平台</label></div>
        <div class="title-right"></div>
      </div>
    </div>
    <div class="mainbox">
      <div class="layout">
        <div class="layout-left">
          <div class="box-gutter pb10">
            <div class="box-all">
              <div class="box-title">入廊管线长度</div>
              <div class="box-content box-a">
                <div class="chart-line-list">
                  <p>
                    建设长度 <span class="digit"> 80</span
                    ><span class="unit">米</span>
                  </p>
                  <p>
                    运营长度 <span class="digit"> 60</span
                    ><span class="unit">米</span>
                  </p>
                  <p>
                    管线种类 <span class="digit"> 8</span
                    ><span class="unit">类</span>
                  </p>
                </div>
                <div class="chart-line-list">
                  <p>
                    规划长度 <span class="digit"> 80</span
                    ><span class="unit">米</span>
                  </p>
                  <p>
                    运营人数 <span class="digit"> 50</span
                    ><span class="unit">人</span>
                  </p>

                  <p>
                    管线长度 <span class="digit"> 300</span
                    ><span class="unit">类</span>
                  </p>
                </div>
              </div>
              <div class="box-foot"></div>
            </div>
          </div>
          <div class="box-gutter pb10">
            <div class="box-all">
              <div class="box-title">环境监测（温湿度）</div>
              <div class="box-content" id="echart1">
                <v-chart class="chart" :option="option1" :autoresize="true" />
              </div>
              <div class="box-foot"></div>
            </div>
          </div>
          <div class="box-gutter">
            <div class="box-all">
              <div class="box-title">环境监测（气体）</div>
              <div class="box-content" id="echart4">
                <v-chart class="chart" :option="option2" :autoresize="true" />
              </div>
              <div class="box-foot"></div>
            </div>
          </div>
        </div>
        <div class="layout-middle">
          <div class="bar">
            <div class="bar-box">
              <ul class="clearfix">
                <li class="pulll_left counter">1258</li>
                <li class="pulll_left counter">3912</li>
                <li class="pulll_left counter">12581</li>
                <li class="pulll_left counter no-line">39144</li>
              </ul>
            </div>
            <div class="bar-box2">
              <ul class="clearfix">
                <li class="pulll_left">今日报警</li>
                <li class="pulll_left">待解决报警</li>
                <li class="pulll_left">本周报警</li>
                <li class="pulll_left">本月报警</li>
              </ul>
            </div>
          </div>
          <div class="map"></div>
          <div class="time">
            <div class="box-all">
              <div class="time-content">
                <span id="showTime"></span>
                <span class="admin" @click="goAdmin">进入管理后台</span>
              </div>
              <div class="box-foot"></div>
            </div>
          </div>
        </div>
        <div class="layout-right">
          <div class="box-gutter pb10">
            <div class="box-all">
              <div class="sy" v-for="option in optionList">
                <v-chart class="chart" :option="option" :autoresize="true" />
              </div>
              <div class="box-foot"></div>
            </div>
          </div>
          <div class="box-gutter pb10">
            <div class="box-all">
              <div class="box-title">安防监控</div>
              <div class="box-content">
                <v-chart class="chart" :option="option3" :autoresize="true" />
              </div>
              <div class="box-foot"></div>
            </div>
          </div>
          <div class="box-gutter">
            <div class="box-all">
              <div class="box-title">设备维修、养护情况</div>
              <div class="box-content">
                <v-chart class="chart" :option="option4" :autoresize="true" />
              </div>
              <div class="box-foot"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { graphic } from 'echarts'
const colors = ['#91CC75', '#5470C6']
const router = useRouter()
const option1 = {
  color: colors,
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    left: '0%',
    top: '30',
    right: '0%',
    bottom: '0',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        show: false
      },
      // prettier-ignore
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: {
        color: '#fff'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      show: true,
      name: '湿度 %',
      position: 'right',
      alignTicks: true,
      axisTick: {
        show: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[1]
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0)'
        }
      }
    },
    {
      type: 'value',
      show: true,
      name: '温度 °C',
      position: 'left',
      alignTicks: false,
      axisTick: {
        show: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: colors[0]
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0)'
        }
      }
    }
  ],
  series: [
    {
      name: '湿度',
      type: 'bar',
      barWidth: '10',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
    },
    {
      name: '温度',
      type: 'bar',
      barWidth: '10',
      yAxisIndex: 1,
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 6.0, 2.3]
    }
  ]
}

const option2 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        color: '#dddc6b'
      }
    }
  },
  legend: {
    top: '0%',
    data: ['氧气', '硫化氢', '甲烷'],
    textStyle: {
      color: 'rgba(255,255,255,.5)',
      fontSize: '12'
    }
  },
  grid: {
    left: '10',
    top: '30',
    right: '10',
    bottom: '10',
    containLabel: true
  },

  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.6)',
          fontSize: 12
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },

      data: [
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
        '07',
        '08',
        '09',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23',
        '24'
      ]
    },
    {
      axisPointer: { show: false },
      axisLine: { show: false },
      position: 'bottom',
      offset: 20
    }
  ],

  yAxis: [
    {
      type: 'value',
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,.6)',
          fontSize: 12
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      }
    }
  ],
  series: [
    {
      name: '氧气',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        color: '#0184d5',
        width: 2
      },
      areaStyle: {
        color: new graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(1, 132, 213, 0.4)'
            },
            {
              offset: 0.8,
              color: 'rgba(1, 132, 213, 0.1)'
            }
          ],
          false
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)'
      },
      itemStyle: {
        color: '#0184d5',
        borderColor: 'rgba(221, 220, 107, .1)',
        borderWidth: 12
      },
      data: [
        3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4
      ]
    },
    {
      name: '硫化氢',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        color: '#00d887',
        width: 2
      },
      areaStyle: {
        color: new graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(0, 216, 135, 0.4)'
            },
            {
              offset: 0.8,
              color: 'rgba(0, 216, 135, 0.1)'
            }
          ],
          false
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)'
      },
      itemStyle: {
        color: '#00d887',
        borderColor: 'rgba(221, 220, 107, .1)',
        borderWidth: 12
      },
      data: [
        5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4
      ]
    },
    {
      name: '甲烷',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        color: '#470b26',
        width: 2
      },
      areaStyle: {
        color: new graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(71,11,38, 0.4)'
            },
            {
              offset: 0.8,
              color: 'rgba(71,11,38, 0.1)'
            }
          ],
          false
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)'
      },
      itemStyle: {
        color: '#470b26',
        borderColor: 'rgba(221, 220, 107, .1)',
        borderWidth: 12
      },
      data: [
        8, 2, 5, 3, 2, 6, 3, 2, 3, 4, 1, 2, 8, 4, 6, 3, 7, 3, 1, 3, 5, 2, 1, 4
      ]
    }
  ]
}

const option3 = {
  //  backgroundColor: '#00265f',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },

  grid: {
    left: '0%',
    top: '10px',
    right: '0%',
    bottom: '2%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['一区', '二区', '三区', '四区', '五区', '六区', '七区', '八区'],
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.1)',
          width: 1,
          type: 'solid'
        }
      },

      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        // rotate:50,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: 'rgba(255,255,255,.6)',
          fontSize: '12'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        //formatter: '{value} %'
        show: true,
        textStyle: {
          color: 'rgba(255,255,255,.6)',
          fontSize: '12'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,.1	)',
          width: 1,
          type: 'solid'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      }
    }
  ],
  series: [
    {
      type: 'bar',
      data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
      barWidth: '35%', //柱子宽度
      // barGap: 1, //柱子之间间距
      itemStyle: {
        normal: {
          color: '#2f89cf',
          opacity: 1,
          barBorderRadius: 5
        }
      }
    }
  ]
}

const option4 = {
  color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
  tooltip: {
    show: true,
    formatter: '{a} : {c} '
  },
  legend: {
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 12,
    bottom: '3%',

    data: ['已维修', '未维修', '已保养', '未保养', '其它'],
    textStyle: {
      color: 'rgba(255,255,255,.6)'
    }
  },

  series: [
    {
      name: '已维修',
      type: 'pie',
      clockWise: false,
      center: ['50%', '42%'],
      radius: ['59%', '70%'],
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
          //shadowBlur: 40,
          //shadowColor: 'rgba(40, 40, 40, 1)',
        }
      },
      hoverAnimation: false,
      data: [
        {
          value: 80,
          name: '01'
        },
        {
          value: 20,
          name: 'invisible',
          tooltip: { show: false },
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,.05)',
              label: { show: false },
              labelLine: { show: false }
            },
            emphasis: {
              color: 'rgba(0,0,0,0)'
            }
          }
        }
      ]
    },
    {
      name: '未维修',
      type: 'pie',
      clockWise: false,
      center: ['50%', '42%'],
      radius: ['49%', '60%'],
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
          //shadowBlur: 40,
          //shadowColor: 'rgba(40, 40, 40, 1)',
        }
      },
      hoverAnimation: false,
      data: [
        {
          value: 70,
          name: '02'
        },
        {
          value: 30,
          name: 'invisible',
          tooltip: { show: false },
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,.05)',
              label: { show: false },
              labelLine: { show: false }
            },
            emphasis: {
              color: 'rgba(0,0,0,0)'
            }
          }
        }
      ]
    },
    {
      name: '已保养',
      type: 'pie',
      clockWise: false,
      hoverAnimation: false,
      center: ['50%', '42%'],
      radius: ['39%', '50%'],
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
          //shadowBlur: 40,
          //shadowColor: 'rgba(40, 40, 40, 1)',
        }
      },
      data: [
        {
          value: 65,
          name: '03'
        },
        {
          value: 35,
          name: 'invisible',
          tooltip: { show: false },
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,.05)',
              label: { show: false },
              labelLine: { show: false }
            },
            emphasis: {
              color: 'rgba(0,0,0,0)'
            }
          }
        }
      ]
    },
    {
      name: '未保养',
      type: 'pie',
      clockWise: false,
      hoverAnimation: false,
      center: ['50%', '42%'],
      radius: ['29%', '40%'],
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
          //shadowBlur: 40,
          //shadowColor: 'rgba(40, 40, 40, 1)',
        }
      },
      data: [
        {
          value: 60,
          name: '04'
        },
        {
          value: 40,
          name: 'invisible',
          tooltip: { show: false },
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,.05)',
              label: { show: false },
              labelLine: { show: false }
            },
            emphasis: {
              color: 'rgba(0,0,0,0)'
            }
          }
        }
      ]
    },
    {
      name: '其它',
      type: 'pie',
      clockWise: false,
      hoverAnimation: false,
      center: ['50%', '42%'],
      radius: ['20%', '30%'],
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
          //shadowBlur: 40,
          //shadowColor: 'rgba(40, 40, 40, 1)',
        }
      },
      data: [
        {
          value: 50,
          name: '05'
        },
        {
          value: 50,
          name: 'invisible',
          tooltip: { show: false },
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,.05)',
              label: { show: false },
              labelLine: { show: false }
            },
            emphasis: {
              color: 'rgba(0,0,0,0)'
            }
          }
        }
      ]
    }
  ]
}

const optionList = [
  {
    title: [
      {
        text: '物资分布',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '16'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      position: function (p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10]
      }
    },
    legend: {
      top: '70%',
      itemWidth: 10,
      itemHeight: 10,
      data: ['管子', '水泥袋', '螺丝', '拖把', '铁丝', '其他'],
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize: '12'
      }
    },
    series: [
      {
        name: '物资分布',
        type: 'pie',
        center: ['50%', '42%'],
        radius: ['40%', '60%'],
        color: [
          '#065aab',
          '#066eab',
          '#0682ab',
          '#0696ab',
          '#06a0ab',
          '#06b4ab'
        ],
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 5, name: '管子' },
          { value: 3, name: '水泥袋' },
          { value: 6, name: '螺丝' },
          { value: 2, name: '拖把' },
          { value: 4, name: '铁丝' },
          { value: 1, name: '其他' }
        ]
      }
    ]
  },
  {
    title: [
      {
        text: '环境总览',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '16'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      position: function (p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10]
      }
    },
    legend: {
      top: '70%',
      itemWidth: 10,
      itemHeight: 10,
      data: ['烟感', '可燃气体', '超干细粉', '照明', '排水', '其他'],
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize: '12'
      }
    },
    series: [
      {
        name: '环境总览',
        type: 'pie',
        center: ['50%', '42%'],
        radius: ['40%', '60%'],
        color: [
          '#065aab',
          '#066eab',
          '#0682ab',
          '#0696ab',
          '#06a0ab',
          '#06b4ab',
          '#06c8ab',
          '#06dcab',
          '#06f0ab'
        ],
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 2, name: '烟感' },
          { value: 3, name: '超干细粉' },
          { value: 1, name: '可燃气体' },
          { value: 4, name: '照明' },
          { value: 8, name: '排水' },
          { value: 1, name: '其他' }
        ]
      }
    ]
  },
  {
    title: [
      {
        text: '分机监控',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '16'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
      position: function (p) {
        //其中p为当前鼠标的位置
        return [p[0] + 10, p[1] - 10]
      }
    },
    legend: {
      top: '70%',
      itemWidth: 10,
      itemHeight: 10,
      data: ['单速分机', '双速风机', '全自动风机', '螺旋风机'],
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize: '12'
      }
    },
    series: [
      {
        name: '型号分布',
        type: 'pie',
        center: ['50%', '42%'],
        radius: ['40%', '60%'],
        color: [
          '#065aab',
          '#066eab',
          '#0682ab',
          '#0696ab',
          '#06a0ab',
          '#06b4ab',
          '#06c8ab',
          '#06dcab',
          '#06f0ab'
        ],
        label: { show: false },
        labelLine: { show: false },
        data: [
          { value: 1, name: '单速风机' },
          { value: 4, name: '双速风机' },
          { value: 2, name: '全自动风机' },
          { value: 2, name: '螺旋风机' }
        ]
      }
    ]
  }
]

let t = null
t = setTimeout(time, 1000) //開始运行
function time() {
  clearTimeout(t) //清除定时器
  let dt = new Date()
  var y = dt.getFullYear()
  var mt = dt.getMonth() + 1
  var day = dt.getDate()
  var h = dt.getHours() //获取时
  var m = dt.getMinutes() //获取分
  var s = dt.getSeconds() //获取秒
  document.getElementById('showTime').innerHTML =
    y +
    ' 年 ' +
    mt +
    ' 月 ' +
    day +
    ' 日 ' +
    '          ' +
    h +
    ' 时 ' +
    m +
    ' 分 ' +
    s +
    ' 秒 '
  t = setTimeout(time, 1000) //设定定时器，循环运行
}
function goAdmin() {
  router.push({ path: '/login' })
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/style.scss';
.imgStyle {
  width: 100%;
  height: 100%;
}
</style>
